<template>
  <view class="get-user-phone-page">
    <view class="logo-wrap">
      <image class="logo-img" src="/static/image/test.jpg"></image>
      <view class="logo-name">天递通</view>
    </view>

    <view class="button-wrap">
      <button
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="btn-class"
      >手机号快捷绑定</button>

      <view
        v-if="!selectArg"
        class="bind-btn-layer"
        @click="handleTipArg"
      ></view>
    </view>


    <view
        class="service-agreement-wrap"
        :class="{'bottom-safe-area': isIphoneX}"
    >
      <van-checkbox
          :value="selectArg"
          shape="square"
          checked-color="#FF9600"
          @change="handleChangeArg"
          icon-size="34rpx"
      >
        <text class="arg-text">已阅读并同意 <text class="import-text" @click.stop="handleToServiceAgreement">《天递通隐私政策》</text></text>
      </van-checkbox>
    </view>


    <van-dialog id="van-dialog"/>
    <van-toast id="van-toast"/>

  </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast';
const app = getApp()
export default {
  data() {
    return {
      selectArg: false,
      isIphoneX: false
    };
  },
  methods: {
    handleChangeArg(selectInfo) {
      const {
        detail
      } = selectInfo

      this.selectArg = detail
    },
    handleToServiceAgreement() {
      uni.navigateTo({
        url: '/pages/send/serviceAgreement'
      })
    },
    getPhoneNumber(res) {
      const {
        detail
      } = res
      const {
        code
      } = detail

      Toast.loading({
        message: '加载中',
        mask: false,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true
      })
      app.request({code}, '/api/logistics/user/auth_mobile').then((res) => {
        console.log(res)
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          const {
            phoneNumber
          } = data

          app.request({mobile: phoneNumber}, '/api/logistics/user/user_edit').then((res) => {
            const {
              code,
              msg
            } = res

            if (code === 1) {
              Toast('绑定成功')
              const eventChannel = this.getOpenerEventChannel()

              eventChannel.emit('editSuccess', phoneNumber)
              setTimeout(() => {
                uni.navigateBack()
              }, 600)
            } else {
              Toast(msg)
            }
          })
        } else {
          Toast(msg)
        }
      })
    },
    handleTipArg() {
      Toast('请阅读并同意《天递通隐私政策》')
    }
  },
  onLoad() {
    const that = this

    uni.getSystemInfo({
      success: function (res) {
        // 有横杆的导航栏高度大于20
        if (res.safeArea.top > 20) {
          that.isIphoneX = true;
        }
      }
    });
  },
}
</script>

<style lang="scss">
.get-user-phone-page {
  .logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 180rpx;
    margin-bottom: 220rpx;
    .logo-img {
      width: 138rpx;
      height: 138rpx;
      border-radius: 50%;
      margin-bottom: 26rpx;
    }
    .logo-name {
      font-size: 32rpx;
      color: #333;
    }
  }

  .button-wrap {
    position: relative;
    padding: 0 36rpx;
    box-sizing: border-box;
    .bind-btn-layer {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 80rpx;
      z-index: 9999;
    }
    .btn-class {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 80rpx;
      color: #fff;
      background-color: #59B43F;
      border-radius: 20px;
      font-size: 30rpx;
    }
  }

  .service-agreement-wrap {
    position: fixed;
    left: 0;
    bottom: 18rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;

    .import-text {
      color: #FF9600;
    }
  }

  .bottom-safe-area {
    bottom: 68rpx;
  }
}
</style>
